<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Reorder animation</title>
	<script type="module" src="./src/index.js"></script>
	<style>
		.btn {
			display: inline-block;
			cursor: pointer;
			background: #fff;
			border: 1px solid #ccc;
			text-align: center;
			width: 90px;
			height: 30px;
			box-sizing: border-box;
			line-height: 30px;
		}

		.add {
			float: right;
		}

		.list {
			position: relative;
		}

		.row {
			overflow: hidden;
			position: absolute;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			left: 0px;
			margin: 20px 0;
			padding: 10px 20px;
			background: #fff;
			border: 1px solid #ccc;
			transition: all 0.5s;
		}

		.row>div:nth-child(1) {
			flex: 1;
		}

		.row>div:nth-child(2) {
			flex: 3;
		}

		.row>div:nth-child(3) {
			flex: 5;
		}

		.rm-btn {
			flex: none;
			color: #fff;
			background: red;
		}
	</style>
</head>

<body>
	<div id="app"></div>
</body>

</html>